<%@page import="com.wanmait.hotelManagement.vo.Picture"%>
<%@page import="com.wanmait.hotelManagement.vo.RoomType"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String path = request.getContextPath(); %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
		<meta name="renderer" content="webkit">
		<!--国产浏览器高速模式-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="穷在闹市" />
		<!-- 作者 -->
		<meta name="revised" content="穷在闹市.v3, 2019/05/01" />
		<!-- 定义页面的最新版本 -->
		<meta name="description" content="网站简介" />
		<!-- 网站简介 -->
		<meta name="keywords" content="搜索关键字，以半角英文逗号隔开" />
		<title>穷在闹市出品</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="<%=path%>/admin/css/base.css">
		<link rel="stylesheet" type="text/css" href="<%=path%>/admin/css/iconfont.css">
		<script type="text/javascript" src="<%=path%>/admin/framework/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="<%=path%>/admin/layui/css/layui.css">
		<script type="text/javascript" src="<%=path%>/admin/layui/layui.js"></script>
		<!-- 滚动条插件 -->
		<link rel="stylesheet" type="text/css" href="<%=path%>/admin/css/jquery.mCustomScrollbar.css">
		<script src="<%=path%>/admin/framework/jquery-ui-1.10.4.min.js"></script>
		<script src="<%=path%>/admin/framework/jquery.mousewheel.min.js"></script>
		<script src="<%=path%>/admin/framework/jquery.mCustomScrollbar.min.js"></script>
		<script src="<%=path%>/admin/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->
<!-- 图片变大css -->
<style type="text/css">
.suibian{
	background-color:white;
	width: 50%;
	height: 45%;
	margin-left: 25%;
	margin-top: 4%;
	z-index:3;
	overflow: hidden;
	position:absolute;
	display: none;
}
.image{
	width:800px;
	height: 380px;
	margin:auto;
	
	display:none;
	border: 1px solid gray;
	
}
</style>
<!-- 图片变大css结束 -->
	</head>

	<body>
	
	
	<div class="suibian" >
				<div class="image">
					<img style="width:100%;height: 100%;" alt="" src="">
				</div>
			</div>
	
		<div class="cBody">
			<!-- <div class="console">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" name="name" required lay-verify="required" placeholder="输入房间类型" autocomplete="off" class="layui-input">
						</div>
						<button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
					</div>
				</form>

				<script>
					layui.use('form', function() {
						var form = layui.form;
				
						//监听提交
						form.on('submit(formDemo)', function(data) {
							layer.msg(JSON.stringify(data.field));
							return false;
						});
					});
				</script>
			</div> -->
			
			
			
			<table class="layui-table" style="text-align: center;z-index:-3;">
				
				<thead>
					<tr>
						<th style="text-align: center;">房间类型</th>
                        <th style="text-align: center;">房间图片</th>
                        <th style="text-align: center;">参考价格</th>
                        <th style="text-align: center;">房间人数</th>
                        <th style="text-align: center;">房间数量(剩余数量)</th>
						<th style="text-align: center;">房间描述</th>
						<th style="text-align: center;">操作
                            <button class="layui-btn layui-btn-xs" onclick="updateBut()">增加</button>
                            <script type="text/javascript">
                          //修改按钮
            				var addFrame = null;
            				function updateBut(){
            					layui.use('layer', function() {
            						var layer = layui.layer;
            							
            						//iframe层-父子操作
            						addFrame = layer.open({
                                		title: "商品信息修改",
            							type: 2,
            							area: ['70%', '60%'],
            							scrollbar: false,	//默认：true,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
            							maxmin: true,
            							content: '<%=path%>/admin/room/addRoomType.jsp'
            						});//
            					});
            					
            				}
                            </script>
                        </th>
					</tr>
				</thead>
				<tbody>
				<%List<RoomType> allRoomType = (List<RoomType>)request.getAttribute("allRoomType");
				for(RoomType roomType:allRoomType)
				{%>
					<tr>
						<td><%=roomType.getRoomName() %></td>
						<td>
						<%for(Picture picture:roomType.getPictures())
						{%>
						<img src="<%=path%>/hotel/images/room/<%=picture.getImages()%>" width="20" height="20" class="smallPic"/><!-- 图片变大css在40行,图片div在157行 -->
						<%}%>
						</td>
                        <%-- <td><img src="<%=path%>/hotel/images/room/<%=roomType.get%>" width="20" height="20" onmouseenter="imgBig(this)" onmouseleave="imgSmall(this)"/></td> --%>
                        <td>￥<span><%=roomType.getRoomPrice()%></span>一晚</td>
                        <td><span><%=roomType.getPersonCount()%></span>人/间</td>
                        <td><%=roomType.getRoomCount()%></td>
						<td><%=roomType.getRemarks()%></td>
						<td>
							<button class="layui-btn layui-btn-xs">修改</button>
							<button class="layui-btn layui-btn-xs layui-btn-normal">删除</button>
							<!--<button class="layui-btn layui-btn-xs layui-btn-warm">查看二级分类</button>-->
						</td>
					</tr>
				<%}
				%>
					<!-- <tr>
						<td>大床房</td>
                        <td><img src="../../images/goodsPIC1.png" width="20" height="20" onmouseenter="imgBig(this)" onmouseleave="imgSmall(this)"/></td>
                        <td>￥200</td>
                        <td>2人</td>
                        <td>50(剩余数量)</td>
						<td>风景好</td>
						<td>
							<button class="layui-btn layui-btn-xs">修改</button>
							<button class="layui-btn layui-btn-xs layui-btn-normal">删除</button>
							<button class="layui-btn layui-btn-xs layui-btn-warm">查看二级分类</button>
						</td>
					</tr> -->
					<!--<tr>
						<td>前端</td>
						<td>例：ES5、ES6、ES7</td>
						<td>
							<button class="layui-btn layui-btn-xs">修改</button>
							<button class="layui-btn layui-btn-xs layui-btn-normal">添加二级分类</button>
							<button class="layui-btn layui-btn-xs layui-btn-warm">查看二级分类</button>
						</td>
					</tr>
					<tr>
						<td>前端</td>
						<td>例：ES5、ES6、ES7</td>
						<td>
							<button class="layui-btn layui-btn-xs">修改</button>
							<button class="layui-btn layui-btn-xs layui-btn-normal">添加二级分类</button>
							<button class="layui-btn layui-btn-xs layui-btn-warm">查看二级分类</button>
						</td>
					</tr>-->
				</tbody>
			</table>
			
			<!-- layUI 分页模块 -->
			<div id="pages"></div>
			<script>
				layui.use(['laypage', 'layer'], function() {
					var laypage = layui.laypage,
						layer = layui.layer;
				
					//总页数大于页码总数
					laypage.render({
					    elem: 'pages'
					    ,count: <%=allRoomType.size()%>
					    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
					    ,jump: function(obj){
					      console.log(obj)
					    }
					});
				});
				/* 图片显示 */
				$(function(){
					$(".smallPic").on("mouseover",function(){
						var pic = $(this).attr("src");
						$(".image img").attr("src",pic);
						$(".image").show();
						$(".suibian").css("display","block");
					});
				})
				$(function(){
					$(".smallPic").on("mouseleave",function(){
						$(".image").hide();
						$(".suibian").css("display","none");
					});
				})
				/* 图片显示结束 */
			</script>
		</div>
		
		
	</body>

</html>